<template>
    <div>
        <vue-seamless-scroll :data="listData" :class-option="defaultOption" class="seamless-warp3">
            <span slot="left-switch" class="left-arrow"></span>
            <span slot="right-switch" class="right-arrow"></span>
            <ul class="item">
                <li v-for="item in listData" :key="item">{{item}}</li>
            </ul>
        </vue-seamless-scroll>
        <Card style="width:320px">
            <div style="text-align:center">
                <!-- <img src="../../images/logo.png"> -->
                <h3>A high quality UI Toolkit based on Vue.js</h3>
            </div>
        </Card>

    </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
    name: "SeamlessScroll",
    components: {
        vueSeamlessScroll
    },
    computed: {
        defaultOption() {
            return {
                direction: 3, // 0 往下 1 往上 2向左 3向右
                // 必须与样式中@outWidth相等
                switchSingleStep: 130,
                navigation: true,
            }
        }
    },
    data() {
        return {
            listData: [1, 2, 3, 4, 5, 6, 7, 8]
        }
    },
    methods: {}
}
</script>

<style lang="less" scoped>
@width: 110px;
@height: 110px;
// 间距
@margin: 10px;
// this.defaultOption().switchSingleStep 必须与 outWidth相等
@outWidth: @width+ @margin+ @margin;

.seamless-warp3 {
    overflow: hidden;
    height: @height+ @margin+ @margin;
    width: @outWidth * 4;
    margin: 0 auto;
    .disabled {
        .left-arrow,
        .right-arrow {
            background-color: #ccc;
            &:hover {
                background-color: #ccc;
            }
        }
    }
    .left-arrow,
    .right-arrow {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #00a0e9;
        cursor: pointer;
        &:hover {
            background-color: #0f39fa;
        }
        &::before {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            top: 12px;
            left: 15px;
            border: 2px solid #fff;
        }
    }
    .left-arrow::before {
        border-right: 0;
        border-bottom: 0;
        transform: rotate(-45deg);
    }
    .right-arrow::before {
        border-left: 0;
        border-top: 0;
        left: 9px;
        transform: rotate(-45deg);
    }
    ul.item {
        width: @outWidth * 8;
        list-style: none;
        li {
            margin: @margin;
            float: left;
            width: @width;
            line-height: @height;
            background-color: #999;
            color: #fff;
            text-align: center;
            font-size: 30px;
        }
    }
}
</style>
